<template>
  <div class="hs-panel hs-bg-card">

    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px" class="filter-item" placeholder="文件名称"
                v-model="listQuery.name"> </el-input>
      <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" v-if="file_manager_btn_add"
                 style="float:right" @click="handleAdd"
                 type="primary" icon="el-icon-plus" circle>
      </el-button>
    </div>

    <el-row class="mt-1">
      <el-col :span="5"
              v-for="item in list"
              :key="item.id"
              :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="host + item.url" class="image">
          <div style="padding: 10px;">
            <span>{{ item.name }}</span>
            <div class="bottom clearfix">
              <span class="time">{{ item.createdAt }}</span>
               <!--<el-button class="button" type="success" icon="el-icon-download"-->
                          <!--size="small" circle-->
                          <!--@click="handleDownload(item)">-->
               <!--</el-button>-->
              <el-button class="button" type="danger" v-if="file_manager_btn_delete"
                         icon="el-icon-delete" size="small"
                         @click="handleDelete(item)"
                         circle>
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.pageNum"
                     :page-sizes="[20,30,50]"
                     :page-size="listQuery.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="textMap[editDialog.type]"
               :visible.sync="editDialog.show">
      <el-form :model="form" label-width="100px">

        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"> </el-input>
        </el-form-item>
        <el-form-item label="文件" >
          <el-upload
            :with-credentials="true"
            :action="action"
            :data="form"
            list-type="picture-card"
            :on-remove="handleFileRemove"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            :limit="3"
            :before-upload="handleBeforeFileUpload"
            ref="fileUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { page, addObj, delObj, fileUploadPath } from 'api/admin/file'
import { httpHost } from 'api/index'

import { mapGetters } from 'vuex'
export default {
  name: 'file',
  data () {
    return {
      action: undefined,
      form: {
        name: undefined
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        name: undefined
      },
      file_manager_btn_edit: false,
      file_manager_btn_del: false,
      file_manager_btn_add: false,
      editDialog: {
        type: undefined,
        show: false
      },
      textMap: {
        update: '编辑',
        create: '创建'
      },
      editRoleDialog: {
        userid: 0,
        name: '',
        show: false
      },
      host: undefined
    }
  },
  created () {
    // console.log(this.elements)
    console.log('user created')
    this.action = fileUploadPath()
    this.getList()
    if (this.elements) {
      this.file_manager_btn_edit = this.elements['file:update']
      this.file_manager_btn_delete = this.elements['file:delete']
      this.file_manager_btn_add = this.elements['file:add']
    }
    this.host = httpHost()
  },
  computed: {
    ...mapGetters({
      elements: 'userElements'
    })
  },
  methods: {
    getList () {
      this.listLoading = true
      page(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter () {
      this.getList().then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange (val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    handleAdd () {
      this.form.id = 0
      this.form.password = '123456'
      this.editDialog.type = 'create'
      this.editDialog.show = true
    },
    handleDelete (row) {
      this.$confirm('此操作将永久删除该文件(' + row.name + '), 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(row.id).then(() => {
          this.$message.success('删除成功')
          const index = this.list.indexOf(row)
          this.list.splice(index, 1)
        })
      })
    },
    handleDownload (row) {
      let link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a') // document.createElement('a')
      link.href = this.host + row.url
      link.download = row.url.substring(10)

      let event = document.createEvent('MouseEvents')
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
      link.dispatchEvent(event)
      // link.click()
    },
    handleFileRemove (file, fileList) {
      console.log('handleFileRemove')
    },
    handleBeforeFileUpload (file) {
      console.log('handleBeforeFileUpload')
    },
    handleFileSuccess (response, file, fileList) {
      this.complete()
    },
    submit () {
      this.$refs['fileUpload'].submit()
    },
    add () {
      addObj(this.form).then(response => {
        let success = parseInt(response.code) === 0
        if (success) {
          this.complete()
        }
      })
    },
    cancel () {
      this.editDialog.show = false
    },
    complete () {
      this.getList()
      this.cancel()
      this.$message.success('操作成功')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
  .time {
    line-height: 32px;
    font-size: 12px;
    color: #AAA;
  }
  .bottom {
    margin: 2px 0;
    line-height: 12px;
  }
  .button {
    padding: 0;
    margin-left: 5px;
    float: right;
  }
  .image {
    width: 100%;
    display: block;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
